<template>
	<div class="user_bind_elder">
		<aplid-base-crud ref="crud" v-bind="baseConfig">
			<template #numberOfTrainees="{ row }">
				<span>{{ row.numberOfTrainees }}</span
				><el-button link type="primary" @click="handleDetail(row.id)">查看</el-button>
			</template>
			<template #studyContent="{ row }">
				<el-button link type="primary" @click="handlePreview(row)">点击查看</el-button>
			</template>
			<template #addDialog>
				<AddDialog @refresh="handleRefresh"></AddDialog>
			</template>
			<template #detailDialog="{ row }">
				<detailDialog :taskId="row.id"></detailDialog>
			</template>
		</aplid-base-crud>
		<el-dialog v-model="videoVisible" width="65%" title="查看学习">
			<videoPlay :src="videoUrl" v-if="videoVisible" style="width: 100%"></videoPlay>
		</el-dialog>
		<el-dialog v-model="practitionerVisible" width="60%" title="培训人员">
			<PractitionerDialog :skillTrainingId="skillTrainingId" v-if="practitionerVisible"></PractitionerDialog>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import AddDialog from './components/AddDialog/index.vue'
import detailDialog from './components/DetailDialog/index.vue'
import PractitionerDialog from './components/practitionerDialog/index.vue'
import { baseConfig } from './config.js'
import { DowloadPreviewImage } from '@/utils/util'
import videoPlay from '@/views/aplid/DetailPage/ContentListItem/FileList/videoPlay/index.vue'

const videoVisible = ref(false)
const practitionerVisible = ref(false)
const crud = ref(null)
const skillTrainingId = ref('')
const videoUrl = ref()

const handleRefresh = () => {
	crud.value.refreshChange()
}
const handlePreview = async (row) => {
	try {
		if (!row.uploadVideo.includes('blob')) {
			// 在此进行一下转换
			row.uploadVideo = await DowloadPreviewImage(row.uploadVideo)
		}
		videoUrl.value = row.uploadVideo
		videoVisible.value = true
	} catch (error) {}
}
const handleDetail = async (id: string) => {
	practitionerVisible.value = true
	skillTrainingId.value = id
}
</script>

<style scoped lang="scss"></style>
